<template>
	<view class="page">
		<view class="pictureList">
			<view class="details" v-for="(v, k) in imageData" :key="k">
				<image :src="v.img" mode="aspectFill" :lazy-load="true"></image>
				<image v-if="imageData.length > 1" @tap="deleteImg(v.img_id)" class="del" src="/static/talent/user/delimg.png"></image>
				<view v-if="k == 0" class="change">首图</view>
				<view v-else class="change" @tap="firstImg(v.img_id)">设为首图</view>
			</view>
			<!-- 			<view class="details"  v-if="imageData.length < 9">
				<image class="addimg" src="/static/talent/my/addPicture.png"></image>
			</view> -->
		</view>
		<view class="footer">
			<view class="footer1" @tap="uploadIMG">+添加</view>
			<view class="footer2" @tap="saveImg">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageData: '',
				imgNum: 9,
				deleteimg: '',
				upload: false,
				imagesX: ''
			}
		},
		onLoad() {
			this.detailsInfo()
			uni.showLoading({
				title: '加载中'
			})

		},

		methods: {
			// 球童详情数据
			detailsInfo() {
				this.$api.post(global.apiUrls.batDetails, {
					id: global.userInfo.id,
					// id: 22
				}).then(res => {
					uni.hideLoading()
					console.log(res)
					if (res.data.code == 1) {
						this.imageData = res.data.data.caddie_info.images_value
						this.imgNum = 9 - this.imageData.length
						if (this.imageData.length != 0) {
							let images = ''
							this.imageData.forEach((v, k) => {
								images += v.img_id + ','
							})
							images = images.substring(0, images.length - 1)
							this.imagesX = images
						} else {
							
						}
					}
				})
			},
			// 上传图片
			uploadIMG(e) {
				let self = this
				if (self.imageData.length >= 9) {
					self.$message.info('最多只能设置9张哦')
					return false
				}
				// 从相册中选择图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择

					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// console.log(tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: global.API_BASE_URL + global.apiUrls.get_car_model, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file[]',
								success: (uploadFileRes) => {
									self.imageData.push({
										img_id: JSON.parse(uploadFileRes.data).data[0].id,
										img: JSON.parse(uploadFileRes.data).data[0].thumb
									})
									// self.imgNum = 9 - self.imageData.length
									self.upload = true

								},
								fail: function(err) {
									console.log(err)
								}
							});
						}

					}
				});
			},
			// 保存图片
			saveImg() {
				let imgs = ''
				this.imageData.forEach((v, k) => {
					imgs += v.img_id + ','
				})
				imgs = imgs.substring(0, imgs.length - 1)
				// if (this.imagesX == imgs) {
				// 	this.$message.info('请添加图片后再操作')
				// 	return false
				// }
				this.$api.post(global.apiUrls.imageManagement, {
					images: imgs
				}).then(res => {
					this.upload = false
					if (this.deleteimg == 1) {
						this.$message.info('删除成功')
						this.deleteimg = ''
					} else if (this.deleteimg == 2) {
						this.$message.info('设置成功')
						this.deleteimg = ''
					} else {
						this.$message.info(res.data.msg)
					}
					if (res.data.code == 1) {
						this.detailsInfo()
					}
				})
			},
			// 设置首图
			firstImg(img_id) {
				if (this.upload) {
					this.$message.info('请先保存图片')
					return false
				}
				this.deleteimg = 2
				let imgIndex = ''
				let imgurl = ''
				for (let i = 0; i < this.imageData.length; i++) {
					if (this.imageData[i].img_id == img_id) {
						imgIndex = i
						imgurl = this.imageData[i].img
						this.imageData.splice(i, 1)
						break;
					}
				}
				this.imageData.unshift({
					img_id: img_id,
					img: imgurl
				});
				// console.log(this.imageData)
				this.saveImg()
			},
			// 删除
			deleteImg(img_id) {
				this.deleteimg = 1
				for (let x = 0; x < this.imageData.length; x++) {
					if (this.imageData[x].img_id == img_id) {
						this.imageData.splice(x, 1)
					}
				}
				this.saveImg()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #FFFFFF;

		.pictureList {
			overflow: hidden;
			padding: 43rpx 32rpx 140rpx;

			.details {
				width: 332rpx;
				height: 332rpx;
				position: relative;
				float: left;
				margin-bottom: 20rpx;
				margin-right: 22rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.del {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					top: 16rpx;
					right: 16rpx;
				}

				.change {
					position: absolute;
					bottom: 0;
					height: 60rpx;
					width: 100%;
					background: rgba(0, 0, 0, 0.5);
					text-align: center;
					line-height: 60rpx;
					color: #FFFFFF;
					font-size: 28rpx;
				}
			}

			.details:nth-child(2n+2) {
				margin-right: 0;
			}
		}

		.footer {
			padding: 16rpx 32rpx 40rpx;
			background: #FFFFFF;
			width: 100%;
			position: fixed;
			bottom: 0;
			overflow: hidden;
			text-align: center;
			line-height: 88rpx;
			display: flex;

			.footer1 {
				width: 242rpx;
				height: 88rpx;
				border: 1rpx solid #006747;
				opacity: 1;
				border-radius: 8rpx;
				color: #006747;
				margin-right: 24rpx;
			}

			.footer2 {
				width: 420rpx;
				height: 88rpx;
				background: #006747;
				opacity: 1;
				border-radius: 8rpx;
				color: #FFFFFF;
			}
		}

		.addimg {
			width: 180rpx !important;
			height: 180rpx !important;
		}
	}
</style>
